﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>Loading - demo</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../layui/css/layui.css?v=v2.4.3" media="all">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .layout {
            margin: 20px;
            padding-left: 15px;
            padding-right: 15px;
            margin-bottom: 70px;
            border: 1px solid #ddd;
            border-radius: 10px;
        }

        .layout textarea {
            height: 400px;
        }

        .layout input[disabled] ,
        .layout .layui-select-disabled .layui-disabled {
            background: #eee;
        }

        .layout .my-fixed button {
            margin-right: .5em;
            margin-top: 16px;
        }

        .layout .my-fixed {
            position:fixed;
            bottom:0;
            left:0;
            text-align: center;
            width: 100%;
            z-index: 111;
        }

        .layout fieldset {
            margin-top: 20px;
        }

        .layui-form-item .layui-input-inline {
            width: auto;
        }

        .layui-form-switch em {
            padding-right: 3px !important;
        }

        input::-webkit-input-placeholder {color: #ccc;}    /* 使用webkit内核的浏览器 */
        input:-moz-placeholder {color: #ccc;}              /* Firefox版本4-18 */
        input::-moz-placeholder {color: #ccc;}             /* Firefox版本19+ */
        input:-ms-input-placeholder {color: #ccc;}         /* IE浏览器 */

        /* .my-margin {} */

        .layout textarea.code {
            display: none;
        }

        .layout .CodeMirror {
            height: auto;
        }

        .my-radius:hover {
            background: #028073;
        }

        .my-radius {
            background: #009688;
            border-radius: 50%;
            position: absolute;
            right: 100px;
            top: 100px;
            height: 150px;
            width: 150px;
            line-height: 150px;
            text-align: center;
            color: white;
            cursor: default;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="layout" id="in-loading">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>前言</legend>
        </fieldset>

        <div style="padding-bottom: 30px; color: #555;">
            由于找不到一款完全符合自己需求的web-loading组件，没办法自己动手写一个得了，拓展jQuery插件，封装为layui组件。
            <br />因时间短，组件及文档可能不是很完美，大家觉得有用就用用，有问题可以邮件给我：neusofts#neusoft.com（#换成@）

            <br /><br /><b>版本更新：</b>

            <br /><br /><b>v2.0</b>（未来版本）
            <br />- 待新增：自定义div对象（CSS3场景）； 
            <br />- 待处理：因img预加载导致loading显示延迟的问题；

            <br /><br /><b>v1.3</b>（最新版）
            <br />- 修复：父节点移除后导致loading实例报错的bug；
            <br />- 修复：afterHideAll默认覆盖全局配置，以最后调用为基准；
            <br />- 增强：img和text样式初始化设置；
            <br />- 新增：inheritRadius参数，是否继承父节点边框的值；
            <br />- 新增：文档的几个示例；

            <br /><br /><b>v1.2</b>
            <br />- 新增：title配置，自定义div、img、text的hover显示内容；
            <br />- 修复：resize方法的处理逻辑及性能；
            <br />- 修复：有无img、text场景下的坐标计算错误bug；
            <br />- 兼容：IE8+、chrome、firefox、oprea、safari等浏览器；

            <br /><br /><b>v1.1</b>
            <br />- 更新：某些场景下loading计算坐标错误的bug；
            <br />- 更新：无img时text加载延迟的bug；
            <br />- 兼容：safari的position计算方法不规范导致的bug；
            <br />- 兼容：IE8+、chrome、firefox、oprea、safari等浏览器；

            <br /><br /><b>v1.0</b>
            <br />- 发布：组件发布
            
            <div class="my-radius" id="my-radius" title="同时展示：圆角边框继承效果">查看文档</div>
        </div>
    </div>
    
    <div class="layout" id="form">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>Loading组件 之 自定义配置及演示（兼容IE8+）</legend>
        </fieldset>

        <form class="layui-form" onsubmit="return false;" lay-filter="my-loading">
            <div class="layui-form-item my-margin">
                <b>遮罩层</b>
                <hr class="layui-bg-green">
            </div>

            <div class="my-show-ot">
                <div class="layui-form-item">
                    <label class="layui-form-label">有无遮罩层</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="opacityDiv" lay-skin="switch" lay-filter="switch" checked lay-text="有遮罩层|无遮罩层">
                    </div>
                    <div class="layui-form-mid layui-word-aux">注：opacity为0时无遮罩层标签</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">遮罩背景色</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="background" value="#fff" placeholder="默认#fff" class="layui-input" id="bg-input">
                    </div>
                    <div class="layui-inline" style="left: -11px;">
                        <div id="bg-btn"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">遮罩class名</label>
                    <div class="layui-input-block">
                        <input type="text" name="overlayClassName" placeholder="默认为空，多个以空格隔开" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">遮罩透明度</label>
                    <div class="layui-input-inline">
                        <select name="opacity" lay-filter="opacity" lay-verify="opacity">
                            <option value="" disabled>选择透明度</option>
                            <option value="0" disabled>0无遮罩(请使用“有无遮罩层”)</option>
                            <option value="0.1">0.1</option>
                            <option value="0.2">0.2</option>
                            <option value="0.3">0.3</option>
                            <option value="0.4">0.4</option>
                            <option value="0.5">0.5</option>
                            <option value="0.6" selected>0.6</option>
                            <option value="0.7">0.7</option>
                            <option value="0.8">0.8</option>
                            <option value="0.9">0.9</option>
                            <option value="1.0">1.0</option>
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">注：opacity为0时无遮罩层</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" title="新增配置项"><span class="layui-badge-dot"></span> 边框继承</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="inheritRadius" value="1" title="继承">
                        <input type="radio" name="inheritRadius" value="0" checked title="不继承">
                    </div>
                    <div class="layui-form-mid layui-word-aux">注：自定义遮罩层是否继承父节点的边框效果，默认false</div>
                </div>
            </div>

            <div class="layui-form-item my-margin">
                <b>图片</b>
                <hr class="layui-bg-green">
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">图片class名</label>
                <div class="layui-input-block">
                    <input type="text" name="imgClassName" placeholder="默认为空，多个以空格隔开" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备选图片</label>
                <div class="layui-input-inline">
                    <select name="imgSrc" lay-filter="imgSrc">
                        <option value="">选择备选编号 / 填写路径</option>
                        <option value="null">不显示图片</option>
                        <option value="0" selected>0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">注：默认编码为0，为null时无图片，可自定义图片路径</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">图片路径</label>
                <div class="layui-input-inline">
                    <input type="text" name="imgSrcUrl" lay-verify="imgSrcUrl" disabled style="width: 400px" placeholder="自定义路径URL" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">注：默认备选编号为0，值为null时无图片，<span style="color:red">推荐：</span>https://loading.io，不考虑IE可使用svg格式文件</div>
            </div>

            <div class="layui-form-item my-margin">
                <b>文本</b>
                <hr class="layui-bg-green">
            </div>

            <div class="my-show-ot">
                <div class="layui-form-item">
                    <label class="layui-form-label">显示文本</label>
                    <div class="layui-input-block">
                        <input type="text" name="text" placeholder="默认为空，为空则不创建文本标签" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">文本Css</label>
                    <div class="layui-input-inline" style="width: 500px;">
                        <input type="text" name="textCss" placeholder="默认为空，格式{color: '#000'}" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">注：默认为空，格式{color: '#000'}</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">文本class名</label>
                    <div class="layui-input-block">
                        <input type="text" name="textClassName" placeholder="默认为空，多个以空格隔开" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item my-margin">
                <b>回调</b>
                <hr class="layui-bg-green">
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">回调函数</label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="cb" value="beforeShow" title="显示前">
                    <input type="checkbox" name="cb" value="afterShow" title="显示后">
                    <input type="checkbox" name="cb" value="afterHide" title="隐藏后">
                    <input type="checkbox" name="cb" value="afterHideAll" title="全部隐藏后">
                </div>
                <div class="layui-form-mid layui-word-aux">注：“隐藏后”的回调同样对“销毁”有效（全部隐藏的回调默认覆盖全局配置，最后配置及调用者优先级最高）</div>
            </div>

            <div class="layui-form-item my-margin">
                <b>其它</b>
                <hr class="layui-bg-green">
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单击关闭</label>
                <div class="layui-input-inline">
                    <input type="radio" name="clickHide" value="1" title="关闭">
                    <input type="radio" name="clickHide" value="0" checked title="不关闭">
                </div>
                <div class="layui-form-mid layui-word-aux">注：单击关闭loading，遮罩、图片、文本均有效（一般配合回调使用）</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">Top偏移量</label>
                <div class="layui-input-inline">
                    <input type="number" name="offsetTop" value="0" placeholder="默认为0" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">注：默认为0，自定义图片、文本的top偏移量（针对图片和文本同时显示且两者绝对居中的微调场景）</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" title="新增配置项"><span class="layui-badge-dot"></span> hover提示</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="默认为空" class="layui-input" style="width: 400px;">
                </div>
                <div class="layui-form-mid layui-word-aux">注：默认为空字符串，自定义div、img、text的hover提示</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">动画时长</label>
                <div class="layui-input-inline">
                    <input type="number" name="animateTime" value="600" placeholder="默认为600" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">注：默认为600，为0时关闭动画效果</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">遮罩z-index</label>
                <div class="layui-input-inline">
                    <input type="number" name="overlayZIndex" value="19999999" placeholder="默认为19999999" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">注：默认为19999999（1,000,000），同时imgZIndex = overlayZIndex + 1</div>
            </div>

            <div class="layui-form-item my-margin">
                <b>生成配置</b>
                <hr class="layui-bg-green">
            </div>

            <div class="layui-form-item layui-form-text" id="my-show-1">
                <label class="layui-form-label">自定义配置 / <span style="color:red">默认预览区</span></label>
                <div class="layui-input-block">
                    <textarea placeholder="生成您的自定义配置" id="textarea" class="layui-textarea" readonly name="setting">正在生成自定义配置...</textarea>
                </div>
            </div>

            <div class="layui-form-item my-fixed">
                <div class="layui-input-block">
                    <button class="layui-btn layui-anim" data-anim="upbit" lay-submit="" lay-filter="my-submit">预览配置</button>
                    <button class="layui-btn layui-btn-danger layui-anim" data-anim="rotate" id="my-reset">重置设置</button>
                    <button class="layui-btn layui-btn-normal layui-anim" data-anim="fadeout" id="my-close-all">关闭所有</button>
                    <button class="layui-btn layui-btn-primary layui-anim" data-anim="scaleSpring" id="my-body">按配置全屏(3s)</button>
                    <button class="layui-btn layui-btn-primary layui-anim" data-anim="scaleSpring" id="my-layer">按配置layer(5s)</button>
                    <button class="layui-btn layui-btn-primary layui-anim" data-anim="scaleSpring" id="my-more">按配置多区域</button>
                    <button class="layui-btn layui-btn-primary" id="my-upload">上传按钮</button>
                    <button class="layui-btn layui-btn-primary layui-anim" data-anim="scaleSpring" id="my-in-loading">叠加嵌套</button>
                    <button class="layui-btn layui-btn-primary" id="my-date">日期控件</button>
                    <button class="layui-btn layui-btn-warm layui-anim" data-anim="up" id="my-demo">Text效果</button>
                </div>
            </div>
        </form>
    </div>

    <div class="layout" id="my-doc">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>全局配置及使用文档</legend>
        </fieldset>
        <div style="margin-bottom: 10px;">
<textarea class="code auto-code">
$(element).loading();        // 此方式 “仅调用show方法”
$(element).loading({ ... }); // 重要提示：此方式会更新 “全局配置 + 执行show方法”

// 配置说明
options = {
    overlayClassName: ''            // 类型String，自定义遮罩层className，可多个，默认空String
    , imgClassName: ''              // 类型String，自定义image的className，可多个，默认空String
    , background: '#fff'            // 类型String，自定义遮罩层背景色，默认#fff
    , opacity: 0.6                  // 类型Number，自定义遮罩层的透明度，默认0.6，注：为0时无遮罩层
    , text: ''                      // 类型String，自定义loading文本，默认空String，注：非空时参考offsetTop设置
    , textCss: {}                   // 类型Object，自定义loading文本样式，默认空{}
    , textClassName: ''             // 类型String，自定义文本的className，可多个，默认空String
    , title: ''                     // 类型String，自定义div、img、text的title，默认空String
    , offsetTop: 0                  // 类型Number，自定义图片+文本模式的top偏移量，注：text为空时无需设置offsetTop
    , imgSrc: 0                     // 类型String|null|Number，自定义loading图片，默认为图片序列的0索引（共0-10），可自定义url路径，注：为null时无图片
    , beforeShow: function () {}    // 类型Function，自定义loading显示前的回调，默认空Function，参数1=this，参数2=jQuery
    , afterShow: function () {}     // 类型Function，自定义loading显示后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading
    , imgZIndex: 19999999+1         // 类型Number，自定义图片的z-index值，默认19999999+1
    , overlayZIndex: 19999999       // 类型Number，自定义遮罩层的z-index值，默认19999999
    , afterHide: function () {}     // 类型Function，自定义loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
    , afterHideAll: function () {}  // 类型Function，自定义全部loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
    , animateTime: 600              // 类型Number，自定义loading显示/隐藏的动画时长，默认600毫秒，注：为0时无动画
    , clickHide: false              // 类型Boolean，自定义单击loading遮罩层/图片/文字是否隐藏loading，默认false
    , inheritRadius: false          // 类型Boolean，自定义遮罩层是否继承父节点的边框效果，默认false
}</textarea>
        </div>
    </div>

    <div class="layout">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>回调</legend>
        </fieldset>

        <div class="layui-tab layui-tab-brief" lay-filter="code-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">beforeShow</li>
                <li>afterShow</li>
                <li>afterHide</li>
                <li>afterHideAll</li>
            </ul>

            <div class="layui-tab-content" style="padding-bottom: 0;">
                <div class="layui-tab-item layui-show">
<textarea class="code auto-code">
// loading显示之前的回调
var loading = $(element).loading('show', {
    /* 私有配置 */
    beforeShow: function (loading, $obj) {
        // loading == this;
        // $obj == $(element);
        // 回调内容
    }
});</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
// loading显示之后的回调
var loading = $(element).loading('show', {
    /* 私有配置 */
    afterShow: function (loading, $obj, $loading) {
        // loading == this;
        // $obj == $(element);
        // $loading == $(div,img,text);
        // 回调内容
    }
});</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
// loading隐藏之后的回调
var loading = $(element).loading('show', {
    /* 私有配置 */
    afterHide: function (loading, $obj, $loading?) {
        // loading == this;
        // $obj == $(element);
        // $loading? == $(div,img,text); 销毁时无此参数
        // 回调内容
    }
});</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
// loading全部隐藏之后的回调（注：全部隐藏的回调默认覆盖全局配置，最后配置及调用者优先级最高）
var loading = $(element).loading('show', {
    /* 私有配置 */
    afterHideAll: function (loading, $obj, $loading?) {
        // loading == this;
        // $obj == $(element);
        // $loading? == $(div,img,text); 全部销毁时无此参数
        // 回调内容
    }
});</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="layout">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>方法</legend>
        </fieldset>

        <div class="layui-tab layui-tab-brief" lay-filter="code-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">show()</li>
                <li>toggle()</li>
                <li>hide()</li>
                <li>hideAll()</li>
                <li>destroy()</li>
                <li>destroyAll()</li>
            </ul>

            <div class="layui-tab-content" style="padding-bottom: 0;">
                <div class="layui-tab-item layui-show">
<textarea class="code auto-code">
/*
- 可以直接jQuery对象调用，也可以创建一个loading对象，以备用；
- 注：如果是jQuery对象数组，则返回的loading也是对应的对象数组；
- 注：若jQuery数组中包含body，则默认只对body有效（body最好单独调用）；
- 注：destroy/destroyAll后loading对象仍可调用show等方法；
- 更详尽的说明，请查看源码中的注释；
*/

// show（loading.show()不支持链式调用）
var loading = $(element).loading('show', { /* 私有配置 */ });</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
// hide <--> show
$(element).loading('toggle');

// 或者
loading.toggle(); // 支持链式调用</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
// hide
$(element).loading('hide');

// 或者
loading.hide(); // 支持链式调用</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
// hideAll
$(element).loading('hideAll');

// 或者
loading.hideAll(); // 支持链式调用</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
// destroy（注：为避免切换页面兼容性，配合onload的loading隐藏建议使用destroy注销对象）
$(element).loading('destroy');

// 或者
loading.destroy(); // 支持链式调用</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
// destroyAll
$(element).loading('destroyAll');

// 或者
loading.destroyAll(); // 支持链式调用</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="layout">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>事件</legend>
        </fieldset>

        <div class="layui-tab layui-tab-brief" lay-filter="code-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">show</li>
                <li>hide</li>
                <li>hideAll</li>
                <li>destroy</li>
                <li>destroyAll</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
<textarea class="code auto-code">
$(element).on('lay-loading.show', function (event, loadingObj) {
    // 监听show事件的回调
});</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
$(element).on('lay-loading.hide', function (event, loadingObj) {
    // 监听hide事件的回调
});</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
$(element).on('lay-loading.hideAll', function (event, loadingObj) {
    // 监听hideAll事件的回调
});</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
$(element).on('lay-loading.destroy', function (event, loadingObj) {
    // 监听destroy事件的回调
});</textarea>
                </div>
                <div class="layui-tab-item">
<textarea class="code">
$(element).on('lay-loading.destroyAll', function (event, loadingObj) {
    // 监听destroyAll事件的回调
});</textarea>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="../../../layui/layui.all.js?v=v2.4.3" charset="utf-8"></script>
<script src="../index.js?v=v1.3" charset="utf-8"></script>

<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<link rel=stylesheet href="https://codemirror.net/theme/eclipse.css">

<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>

<script src='http://codemirror.net/addon/hint/show-hint.js'></script>
<script src='http://codemirror.net/addon/hint/javascript-hint.js'></script>
<script src='http://codemirror.net/addon/hint/sql-hint.js'></script>
<script src='http://codemirror.net/addon/hint/html-hint.js'></script>
<script src='http://codemirror.net/addon/hint/xml-hint.js'></script>
<script src='http://codemirror.net/addon/hint/anyword-hint.js'></script>
<script src='http://codemirror.net/addon/hint/css-hint.js'></script>
<script src='http://codemirror.net/addon/hint/show-hint.js'></script>

</html>